<template>
	<!-- grid -->
	<view class="circle-list-album-content" ref="content" v-if="show">

		<!-- 1张图 -->
		<view v-if="list.length === 1" style="font-size: 0;">
			<image style="width: 100%; height: 400rpx;" :src="list[0].tburl" mode="aspectFill"></image>
		</view>

		<!-- 2张图 -->
		<view class="u-flex u-row-between u-flex-wrap" v-if="list.length == 2 || list.length == 4" style="width: 100%;">

			<image v-for="(item,index) in list" :key="index"
				style="width: 100rpx;height: 200rpx;background-color: #007AFF;"
				:style="{'width':width/2 - 2 + 'rpx','height':width/2 - 2 + 'rpx','margin-top':(index>=2 ? 6 : 0) + 'rpx'}"
				mode="aspectFill" :src="item.tburl">
			</image>
			
		</view>

		<!-- 3张图 -->
		<view v-if="list.length == 3" class="u-flex" style="width: 100%;height: auto;font-size: 0;">
			<image style="width: 100%;height:406rpx;background-color: #007AFF;margin-right: 6rpx;" :src="list[0].tburl"
				mode="aspectFill">

			</image>
			<view style="width: auto;height: 100%;font-size: 0;">
				<view style="width: 200rpx;height: 200rpx;background-color: #4CD964;margin-bottom: 6rpx;">
					<image style="width: 100%;height: 100%;background-color: #DBF1E1;" :src="list[1].tburl"
						mode="aspectFill"></image>
				</view>
				<image style="width: 200rpx;height: 200rpx;background-color: #DBF1E1;" :src="list[2].tburl"
					mode="aspectFill"></image>
			</view>
		</view>

		<!-- 5张以上 -->
		<view class="u-flex u-flex-wrap" v-if="list.length >= 5">
			<image v-for="(item,index) in list" :key="index"
				style="width: 100rpx;height: 200rpx;background-color: #007AFF;"
				:style="{'width':width/3 - 3 + 'rpx','height':width/3 - 3 + 'rpx','margin-top':(index>=3 ? 6 : 0) + 'rpx','margin-left':(index%3 ? 6 : 0) + 'rpx'}"
				mode="aspectFill" :src="item.tburl">
			</image>
		</view>

	</view>
</template>

<script>
	export default {
		name: "circle-list-album",
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
		},
		mounted() {

			this.getWidtht()

			this.show = this.list.length != 0

		},
		data() {
			return {
				show: true,
				width: 0.0
			};
		},
		methods: {
			getWidtht() {

				let that = this

				uni.getSystemInfo({

					success: function(res) { // res - 各种参数

						let obj = uni.createSelectorQuery().select(".circle-list-album-content")

						obj.boundingClientRect(function(data) { // data - 各种参数

							that.width = data.width * 2

						}).exec()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.equalTwo {
		width: 50%;
		display: inline-block;
		padding-top: 50%;
		border-radius: 100%;
		background-color: #2B85E4;
	}
</style>
